<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<app-header (emitSearch)="this.searchTerm({term: $event})"></app-header>

<div
  class="image-generation-container grid grid-flow-row-dense grid-cols-1 lg:grid-cols-3 gap-5 mx-4 lg:container lg:mx-auto lg:mt-5"
  *ngIf="documents.length > 0"
>
  <div class="image-preview col-span-2 container">
    <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
      <h3 style="width: 100%">Imagen 3 Edition for the entire image</h3>
      <div
        class="thumbnail"
        *ngFor="let result of firstHalfPagedDocuments"
        (click)="changeImageSelection(result)"
      >
        <div class="thumbnail-placeholder">
          <img
            src="data:image/png;base64,{{ result.image.encodedImage }}"
            *ngIf="!showDefaultDocuments && documents.length > 0"
          />
          <img
            src="{{ result.image.encodedImage }}"
            *ngIf="showDefaultDocuments"
          />
        </div>
      </div>
    </div>

    <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
      <h3 style="width: 100%">Imagen 3 Edition for just the background</h3>
      <div
        class="thumbnail"
        *ngFor="let result of secondHalfPagedDocuments"
        (click)="changeImageSelection(result)"
      >
        <div class="thumbnail-placeholder">
          <img
            src="data:image/png;base64,{{ result.image.encodedImage }}"
            *ngIf="!showDefaultDocuments && documents.length > 0"
          />
          <img
            src="{{ result.image.encodedImage }}"
            *ngIf="showDefaultDocuments"
          />
        </div>
      </div>
    </div>
    <div class="main-image">
      <div class="main-image-placeholder">
        <img
          src="data:image/png;base64,{{
            selectedResult?.image?.encodedImage || ''
          }}"
          *ngIf="!showDefaultDocuments && documents.length > 0"
        />
        <img
          src="{{ pagedDocuments[0]?.image?.encodedImage }}"
          *ngIf="showDefaultDocuments"
          class="object-contain"
        />
      </div>
    </div>
  </div>

  <div class="configuration mt-4 lg:mt-0">
    <mat-form-field>
      <mat-label>AI Model</mat-label>
      <mat-select [(value)]="selectedModel">
        <mat-option
          *ngFor="let model of imagen3ModelsList"
          [value]="model.value"
          (click)="changeImagen3Model(model)"
        >
          {{ model.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div class="number-results">
      <mat-label style="padding-right: 1rem">Number of Results</mat-label>
      <mat-slider min="1" max="4" step="1" showTickMarks discrete>
        <input
          matSliderThumb
          (input)="onNumberOfResultsChange($event)"
          [value]="selectedNumberOfResults"
        />
      </mat-slider>
    </div>

    <div class="number-results">
      <mat-label style="padding-right: 1rem"
        >Mask Dilation (only for background editing):
        {{ selectedMaskDistilation }}</mat-label
      >
      <mat-slider
        min="0.005"
        max="0.02"
        step="0.0001"
        showTickMarks
        discrete
        style="width: 80%"
      >
        <input
          matSliderThumb
          (input)="onSliderChange($event)"
          [value]="selectedMaskDistilation"
        />
      </mat-slider>
    </div>

    <div class="submit-changes">
      <button mat-raised-button color="primary" (click)="submitChanges()">
        Submit Changes
      </button>
    </div>

    <div style="margin-top: 2rem">
      <button mat-raised-button color="primary" (click)="goToHomePage()">
        Select another image
      </button>
    </div>
  </div>
</div>
